import React from 'react';
import {
  connect,
} from 'dva';
import PropTypes from 'prop-types';
import {
  input,
  option,
} from './option';

/**
 * 用于创建拥有多个选择框，输入框的组件，
 * 可以在查询，新增，编辑时复用
 */
class Filters extends React.Component {
  constructor(p) {
    super(p);
    this.handleChange = this.handleChange.bind(this);
    this.handleOptionChange = this.handleOptionChange.bind(this);
    this.getArea = this.getArea.bind(this);

    this.state = {
      query: {

      },
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    // 查询所有的仓库
    dispatch({
      type: 'warehouseLoc/queryWarehouse',
    });
  }

  componentDidUpdate() {
    this.state.query = this.props.query;
  }

  /**
   * @param {String} wid 仓库id
   */
  getArea(wid) {
    const { dispatch } = this.props;
    dispatch({
      type: 'warehouseLoc/queryArea',
      payload: {
        wid,
      },
    });
    this.state.query.area = null;
    this.setState({});
  }

  /**
   * 用于处理选择框的输入
   */
  handleOptionChange(type) {
    // 顺序
    const update = {
      warehouse: () => {

      },
      area: this.getArea,
    };

    return (value) => {
      this.state.query[type] = value;
      this.setState({});
      const list = ['wid', 'area'];
      const index = list.indexOf(type);
      for (let i = index + 1; i < list.length; i++) {
        update[list[i]](value);
      }
      this.props.onChange(this.state.query);
    };
  }

  handleChange(type) {
    return (event) => {
      this.state.query[type] = event.target.value;
      this.setState({});
      this.props.onChange(this.state.query);
    };
  }

  options() {
    const query = this.props.query;
    const {
      warehouses,
      areas,
      defaultWid,
    } = this.props.warehouseLoc;
    const list = [
      option({
        title: '仓库',
        placeholder: '选择一个仓库',
        onChange: this.handleOptionChange('wid'),
        value: String(query.wid || defaultWid),
        disabled: this.props.type === 'nowrap',
        options: warehouses.map((item) => {
          return {
            value: String(item.wid),
            title: item.name,
          };
        }),
      }),
      option({
        title: '库区',
        placeholder: '选择一个库区',
        onChange: this.handleOptionChange('area'),
        value: query.area,
        options: (areas[String(query.wid || defaultWid)] || []).map((item) => {
          return {
            value: item,
            title: item,
          };
        }),
      }),
      input({
        title: '楼层',
        placeholder: '输入一个楼层',
        onChange: this.handleChange('floor'),
        value: query.floor,
      }),
      input({
        title: '排',
        placeholder: '输入一个排',
        onChange: this.handleChange('therow'),
        value: query.therow,
      }),
      input({
        title: '列',
        placeholder: '输入一个列',
        onChange: this.handleChange('thecolumn'),
        value: query.thecolumn,
      }),
    ];
    return list;
  }

  render() {
    const list = this.options();
    if (this.props.type === 'nowrap') {
      return (
        <div>
          {
            list.map((item) => {
              return [
                item,
                <br />,
              ];
            })
          }
        </div>
      );
    }
    return (
      <div>
        {
          [list[0], list[1]]
        }
        <br />
        {
          [list[2], list[3], list[4]]
        }
      </div>
    );
  }
}

Filters.propTypes = {
  onChange: PropTypes.func,
  query: PropTypes.object,
  /**
   * 用于设定显示的类型，
   * - wrap，就分两列，
   * - nowrap，竖直排列
   */
  type: PropTypes.string,
};

Filters.defaultProps = {
  onChange: () => {},
  query: {},
  type: 'wrap',
};

exports.Filters = connect(state => state)(Filters);
